<template v-if="bye">

  <div class="box">
    <a-row justify="space-between" align="middle">
      <a-col>
        <RouteTitle />
      </a-col>
    </a-row>

    <a-tabs
      style="margin-top: 20px; position: relative;"
      v-model:activeKey="viewActiveKey"
      @change="changeActiveKey"
      >

      <template #rightExtra>
        <!-- <a-dropdown :placements="bottomRight">
          <template #overlay>
            <a-menu style="margin-left: 80px">
              <a-menu-item :key="account.key" v-for="account in accountList">
                <div class="account_item" @click="handleMenuClick(account)">
                  <img :src="account.image" alt="" /><span>{{
                    account.value
                  }}</span>
                </div>
              </a-menu-item>
            </a-menu>
          </template> -->
          <a-button
           @click="handleMenuClick('douyin')"
            style="margin-left: auto; line-height: 1; font-size: 15px; position: absolute; right: 0; top: 5px;"
            size="large"
            type="primary"
            class="publish-btn"
            >发布成片
            <!-- <DownOutlined /> -->
          </a-button>
        <!-- </a-dropdown> -->
      </template>
      <!-- @change="tabChangeHandle" -->
      <a-tab-pane
        key="视频"
        tab="视频发布记录"
      >
      <a-row style="margin-top: 20px">
     
      <!-- Modal 对话框 -->
      <a-modal
        v-model:visible="isModalVisible"
        title="请选择抖音发布方式"
        :maskClosable="false"
        :mask="true"
      >
        <template #footer>
          <a-button key="qr_code" @click="handleModelQrCode">
            <template #icon><QrcodeOutlined /></template>
            扫码发布</a-button
          >
          <a-button key="api" type="primary" @click="handleModelAPI">
            <template #icon><CloudSyncOutlined /></template>
            立即发布</a-button
          >
        </template>
        <p>
          <span style="font-size: 16px; font-weight: bold"
            >发布方式说明：目前抖音矩阵同时支持2种发布方式。</span
          >
          <br />
          <span
            ><b>扫码发布：</b
            ><br />需要对应账号配合的发布方式，从手机端打开抖音扫码完成发布。</span
          ><br />
          <span
            ><b>立即发布：</b
            ><br />需要先下载客户端进行扫码授权登录，然后发布的时候选择在线账号再进行自动发布。</span
          >
        </p>
      </a-modal>
    </a-row>

    <!-- <a-tabs
    type="card"
      v-model:activeKey="activeKey"
      @change="tabChangeHandle"
    >
      <a-tab-pane
        v-for="item in tabList"
        :key="item.key"
        :disabled="item?.developing == 1"
      >
      <template #tab>
        {{ item.value }} 
        <span v-if="item.key == 'douyin'"> 
          <a-tooltip>
            <template #title>因抖音政策调整，扫码发布的数据量拉取正在维护中...</template>
            <InfoCircleOutlined /> 
          </a-tooltip>
         </span>
      </template>
      </a-tab-pane>
    </a-tabs> -->

    <a-row justify="space-between" align="middle" v-if="false">
      <a-col class="title">视频数据</a-col>
      <a-col>
        <a-row class="date-list">
          <a-col
            :span="8"
            v-for="item in dateList"
            :key="item.key"
            :class="item.key == dateKey ? 'date-btn' : ''"
            @click="dateClick(item.key)"
          >
            {{ item.title }}
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <a-row class="video-data-list" :wrap="false" v-if="false">
      <a-col class="item-list" v-for="i in 7" :key="i" :span="3">
        <a-row justify="space-between" align="middle">
          <a-col>
            <div class="sub-title">IP账号</div>
          </a-col>
          <a-col class="icon-image">
            <img
              src="../../../common/image/workShotstackImage/account.png"
              style="width: 18px; height: 18px"
            />
          </a-col>
        </a-row>
        <a-row>
          <a-col class="num">0</a-col>
        </a-row>
      </a-col>
    </a-row>

    <!-- <div class="title">发布记录</div> -->

    <a-row
      v-if="false"
      justify="space-between"
      align="middle"
      style="margin: 15px 0; margin-bottom: 20px"
      :gutter="[16, 16]"
    >
      <a-col>
        <a-button>项目名称</a-button>
        <a-input
          v-model:value="merchantName"
          placeholder="请输入项目"
          style="width: 276px; border-left: none"
        />
      </a-col>
      <a-col>
        <a-button>状态</a-button>
        <a-select
          v-model:value="status"
          placeholder="请选择状态"
          :options="statusOptions"
          style="width: 276px"
          allowClear
        ></a-select>
      </a-col>
      <a-col>
        <a-button>创建时间</a-button>
        <a-range-picker v-model:value="dateTime" :ranges="ranges" />
      </a-col>
      <!-- <a-col v-if="expand">
        <a-button>定时发布时间</a-button>
        <a-range-picker v-model:value="futureTime" :ranges="futureTimeRanges" />
      </a-col> -->
      <a-col v-if="!expand">
        <a-button style="padding-right: 20px">门店POI</a-button>
        <a-input
          v-model:value="POIName"
          placeholder="请输入项目"
          style="width: 276px; border-left: none"
        />
      </a-col>
      <a-col style="text-align: right" :span="expand ? 4 : 24">
        <a-space>
          <a-button
            type="primary"
            style="background: #2878ff; border: none; border-radius: 6px"
            @click="querySearchClick"
          >
            <template #icon>
              <search-outlined />
            </template>
            查询
          </a-button>
          <a-button
            type="primary"
            ghost
            style="border: 1px solid #e0e0e6; color: #000; border-radius: 6px"
            @click="resettingClick"
            >重置</a-button
          >
          <a-button
            type="link"
            size="small"
            style="color: #2878ff"
            @click="expandClick"
          >
            {{ expand ? "展开" : "收起" }}

            <down-outlined style="font-size: 12px" v-if="expand" />
            <up-outlined style="font-size: 12px" v-else />
          </a-button>
        </a-space>
      </a-col>
    </a-row>
    <a-spin :spinning="modelLoading">
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        :pagination="pagination"
        @change="handleTableChange"
        :loading="loading"
        :scroll="{ x: 2000 }"
      >
        <template #bodyCell="{ record, column }">
          <!-- 自动发布 -->
          <template v-if="column.key == 'merchant_name'">
            <div class="merchant_name">
              <template v-if="record?.video?.length <= 1">
                <div class="merchant_name_lf">
                  <div class="cover_url">
                    <template v-if="record?.video[0]?.cover_url">
                      <img :src="record?.video[0]?.cover_url" alt="" />
                    </template>
                    <template v-else>
                      <video :src="record?.video[0]?.material_url"></video>
                    </template>
                    <div class="mask">
                      <EyeOutlined
                        class="to_view"
                        @click.stop="
                          toViewVideo(
                            record.video[0].material_url ||
                              record?.video[0]?.cover_url
                          )
                        "
                      >
                      </EyeOutlined>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <a-popover
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.closest('.merchant_name');
                    }
                  "
                >
                  <template #content>
                    <div class="video_list">
                      <div
                        class="video_item"
                        v-for="(videoItem, videoIndex) in record?.video"
                        :key="videoIndex"
                      >
                        <img
                          v-if="videoItem?.cover_url"
                          :src="videoItem?.cover_url"
                          alt=""
                        />
                        <video v-else :src="videoItem?.material_url"></video>
                        <div class="mask">
                          <EyeOutlined
                            class="to_view"
                            @click.stop="toViewVideo(videoItem?.material_url)"
                          >
                          </EyeOutlined>
                        </div>
                      </div>
                    </div>
                  </template>
                  <div class="merchant_name_lf">
                    <div class="cover_url">
                      <template v-if="record?.video[0]?.cover_url">
                        <img :src="record?.video[0]?.cover_url" alt="" />
                      </template>
                      <template v-else>
                        <video :src="record?.video[0]?.material_url"></video>
                      </template>
                      <div class="mask">
                        <EyeOutlined
                          class="to_view"
                          @click.stop="
                            toViewVideo(
                              record.video[0].material_url ||
                                record?.video[0]?.cover_url
                            )
                          "
                        >
                        </EyeOutlined>
                      </div>
                    </div>
                  </div>
                </a-popover>
              </template>

              <!-- 右侧区域 -->
              <div class="merchant_name_rg" @click="handleGoDetail(record)">
                <span class="merchant_name_title">{{
                  record?.name || record?.merchant_name
                }}</span>
                <div v-if="record?.filmvideos?.[0]">
                  <span v-if="record?.filmvideos?.[0].associ_poi">
                    /{{ record?.filmvideos?.[0].associ_poi?.store_name }}
                  </span>
                </div>
                <div>
                  <div style="color: #9ca3af">ID: {{ record.id }}</div>
                  <div style="color: #9ca3af">
                    <a-tag
                      v-if="record?.send_type == 'qr_code'"
                      color="processing"
                    >
                      <template #icon>
                        <qrcode-outlined />
                      </template>
                      扫码发布
                    </a-tag>
                    <a-tag v-if="record?.send_type == 'api'" color="processing">
                      <template #icon>
                        <cloud-sync-outlined />
                      </template>
                      自动发布
                    </a-tag>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 发布状态 -->
          <template v-if="column.key == 'status'">
            <!-- :stroke-color="{
              '0%': '#108ee9',
              [`${Math.floor((record?.error_num / record?.total) * 100)}%`]: 'red',
              [`${Math.floor((record?.success_num / record?.total) * 100)}%`]: 'rgb(82, 196, 26)',
            }" -->
            <a-tooltip
              :title="`发布总数：${record.total} / 成功：${
                record?.success_num || 0
              } / 失败：${record?.error_num || 0}`"
            >
              <a-progress
                :percent="
                  Math.floor((record?.release_num / record?.total) * 100)
                "
                :success="{
                  percent: Math.floor(
                    (record?.success_num / record?.total) * 100
                  ),
                }"
                type="circle"
                :width="70"
              >
                <template #format="percent">
                  <div
                    style="
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                    "
                  >
                    <span style="color: black">发布总数</span>
                    <span
                      style="
                        color: black;
                        font-weight: 600;
                        display: inline-block;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 40px;
                        font-weight: 600 !important;
                      "
                    >
                      {{ record?.total }}
                    </span>
                  </div>
                </template>
              </a-progress>
            </a-tooltip>
          </template>
          <template v-if="column.key == 'AmountOfData'">
            <span>账号数量: {{ record.account_count }}</span>
            <br />
            <span>播放总量: {{ record.play_count_all }}</span>
            <br />
            <span>评论总量: {{ record?.comment_count_all??0 }}</span>
            <br />
            <span>分享总量: {{ record?.share_count_all??0 }}</span>
          </template>

          <template v-if="column.key == 'release_type_msg'">
            <span>  {{ record?.release_type_msg }}</span>
            <br />
            <a-tag color="default">{{ (record?.filmvideos[0]?.job_type == 1) ? '服务端':'本地' }}</a-tag>
          </template>

          <template v-if="column.key == 'anchor_ary'">
            <!-- 挂载内容 -->
            <div class="anchor_ary_box">
              <template v-if="record?.anchor_type == 0">
                <p style="text-align: center; width: 100%">暂无挂载内容</p>
              </template>
              <!-- 挂载位置 -->
              <template v-if="record?.anchor_type == 1">
                <div class="anchor_ary_item_box">
                  <p>位置:</p>
                  <template v-if="record.anchor_ary.length <= 5">
                    <p
                      v-for="ele in record?.anchor_ary"
                      :key="ele.id"
                      class="anchor_ary_item"
                    >
                      <span v-if="ele.name?.trim().length <= 10">
                        {{ ele.name }}
                      </span>
                      <span v-else>
                        <a-popover v-if="ele.name?.trim().length > 10">
                          <span>
                            {{ ele.name?.slice(0, 10) }}
                          </span>
                          <template #content>
                            <p style="max-width: 300px">{{ ele.name }}</p>
                          </template>
                          <ellipsis-outlined />
                        </a-popover>
                      </span>
                    </p>
                  </template>
                  <template v-else>
                    <a-popover v-if="record?.anchor_ary?.length > 5">
                      <p
                        v-for="ele in record?.anchor_ary?.slice(0, 5)"
                        :key="ele.id"
                        class="anchor_ary_item"
                      >
                        <span v-if="ele.name?.trim().length <= 10">
                          {{ ele.name }}
                        </span>
                        <span v-else>
                          <a-popover v-if="ele.name?.trim().length > 10">
                            <span>
                              {{ ele.name?.slice(0, 10) }}
                            </span>
                            <template #content>
                              <p style="max-width: 300px">{{ ele.name }}</p>
                            </template>
                            <ellipsis-outlined />
                          </a-popover>
                        </span>
                      </p>
                      <template #content>
                        <p
                          style="max-width: 300px"
                          v-for="ele in record?.anchor_ary?.slice(5)"
                          :key="ele.id"
                          class="anchor_ary_item"
                        >
                          {{ ele.name }}
                        </p>
                      </template>
                      <div
                        class="eslipes"
                        style="text-align: center; cursor: pointer"
                      >
                        <ellipsis-outlined />
                      </div>
                    </a-popover>
                  </template>
                </div>
              </template>
              <!-- 挂载小程序-->
              <template v-if="record?.anchor_type == 2">
                <div class="anchor_ary_item_box">
                  <p>小程序:</p>
                  <template v-if="record.anchor_ary.length <= 5">
                    <p
                      v-for="ele in record?.anchor_ary"
                      :key="ele.id"
                      class="anchor_ary_item"
                    >
                      <span v-if="ele.name?.trim().length <= 10">
                        {{ ele.name }}
                      </span>
                      <span v-else>
                        <a-popover v-if="ele.name?.trim().length > 10">
                          <span>
                            {{ ele.name?.slice(0, 10) }}
                          </span>
                          <template #content>
                            <p style="max-width: 300px">{{ ele.name }}</p>
                          </template>
                          <ellipsis-outlined />
                        </a-popover>
                      </span>
                    </p>
                  </template>
                  <template v-else>
                    <a-popover v-if="record?.anchor_ary?.length > 5">
                      <p
                        v-for="ele in record?.anchor_ary?.slice(0, 5)"
                        :key="ele.id"
                        class="anchor_ary_item"
                      >
                        <span v-if="ele.name?.trim().length <= 10">
                          {{ ele.name }}
                        </span>
                        <span v-else>
                          <a-popover v-if="ele.name?.trim().length > 10">
                            <span>
                              {{ ele.name?.slice(0, 10) }}
                            </span>
                            <template #content>
                              <p style="max-width: 300px">{{ ele.name }}</p>
                            </template>
                            <ellipsis-outlined />
                          </a-popover>
                        </span>
                      </p>
                      <template #content>
                        <p
                          style="max-width: 300px"
                          v-for="ele in record?.anchor_ary?.slice(5)"
                          :key="ele.id"
                          class="anchor_ary_item"
                        >
                          {{ ele.name }}
                        </p>
                      </template>
                      <div
                        class="eslipes"
                        style="text-align: center; cursor: pointer"
                      >
                        <ellipsis-outlined />
                      </div>
                    </a-popover>
                  </template>
                </div>
              </template>
              <!-- 挂载小黄车 -->
              <template v-if="record?.anchor_type == 3">
                <div class="anchor_ary_item_box">
                  <p>小黄车:</p>
                  <template v-if="record.anchor_ary.length <= 5">
                    <p
                      v-for="ele in record?.anchor_ary"
                      :key="ele.id"
                      class="anchor_ary_item"
                    >
                      <span v-if="ele.name?.trim().length <= 10">
                        {{ ele.name }}
                      </span>
                      <span v-else>
                        <a-popover v-if="ele.name?.trim().length > 10">
                          <span>
                            {{ ele.name?.slice(0, 10) }}
                          </span>
                          <template #content>
                            <p style="max-width: 300px">{{ ele.name }}</p>
                          </template>
                          <ellipsis-outlined />
                        </a-popover>
                      </span>
                    </p>
                  </template>
                  <template v-else>
                    <a-popover v-if="record?.anchor_ary?.length > 5">
                      <p
                        v-for="ele in record?.anchor_ary?.slice(0, 5)"
                        :key="ele.id"
                        class="anchor_ary_item"
                      >
                        <span v-if="ele.name?.trim().length <= 10">
                          {{ ele.name }}
                        </span>
                        <span v-else>
                          <a-popover v-if="ele.name?.trim().length > 10">
                            <span>
                              {{ ele.name?.slice(0, 10) }}
                            </span>
                            <template #content>
                              <p style="max-width: 300px">{{ ele.name }}</p>
                            </template>
                            <ellipsis-outlined />
                          </a-popover>
                        </span>
                      </p>
                      <template #content>
                        <p
                          style="max-width: 300px"
                          v-for="ele in record?.anchor_ary?.slice(5)"
                          :key="ele.id"
                          class="anchor_ary_item"
                        >
                          {{ ele.name }}
                        </p>
                      </template>
                      <div
                        class="eslipes"
                        style="text-align: center; cursor: pointer"
                      >
                        <ellipsis-outlined />
                      </div>
                    </a-popover>
                  </template>
                </div>
              </template>
            </div>
          </template>
          <template v-if="column.key == 'action'">
            <!--     
            本地发布失败了, 必须要在exe进行重新发布
             -->
            <template v-if="(record?.success_num + record?.error_num == record.total && record?.error_num >= 1) && record?.filmvideos[0]?.job_type == 2 && !ELECTRON">
              <a-tooltip placement="top">
              <template #title>
                <span>请到客户端点击重新发布</span>
              </template>
              <a-button
                    type="link"
                    size="small"
                    :disabled="true"
                    >重新发布</a-button
                  >
            </a-tooltip>

            </template>



            <a-button
              v-else-if="
                record?.success_num + record?.error_num == record.total &&
  record?.error_num >= 1
"
              type="link"
              @click="reReleaseHandle(record)"
              size="small"
              >重新发布</a-button
            >

            <a-button
              v-if="
                record?.send_type === 'qr_code' &&
                record.total !== record.success_num
              "
              type="link"
              @click="getQrImage(record)"
              size="small"
              >计划二维码</a-button
            >

            <a-button type="link" @click="handleGoDetail(record)" size="small"
              >查看</a-button
            >
            <a-button type="link" @click="deleteClick(record)" size="small"
              >删除</a-button
            >
          </template>
        </template>
      </a-table>
    </a-spin>
    </a-tab-pane>

      <!-- <a-tab-pane
        key="图文"
        tab="图文发布记录"
      >
      <GraphicTextIssueRecord ref="GraphicTextIssueRecordRef"></GraphicTextIssueRecord>
    </a-tab-pane> -->
    </a-tabs>



    <!-- QRcode -->
    <QRCode :visible="qRCodeVisible" @onCancel="qRCodeVisible = false" />

    <!-- 自动发布 -->
    <AutomaticPublishing
      :visible="automaticPublishingVisible"
      @onCancel="automaticPublishingVisible = false"
      @onConfirm="onConfirmChange"
    />

    <viewVideo ref="viewVideoRef"></viewVideo>

    <reReleaseDialog
      ref="reReleaseDialogRef"
      @rePublishOver="rePublishOver"
    ></reReleaseDialog>

    <!-- 充值弹窗 -->
    <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>

    <a-modal
      :visible="ModelUpState"
      @cancel="handleClose"
      :footer="null"
      :width="300"
    >
      <template #title>
        <div>
          <span>计划二维码</span>
        </div>
      </template>
      <div class="mobile">
        <div class="mobile-img">
          <img :src="MobileimgUrl" alt="" />
        </div>
        <a-tooltip placement="top">
          <template #title>
            <span
              >Android 和 iOS 支持分享到抖音发布页功能的最低抖音版本为： <br />
              ​Android：20.8.0 <br />
              ​iOS：21.5.0 ​</span
            >
          </template>
          <div class="mobile-title">请使用抖音扫描二维码</div>
        </a-tooltip>
      </div>
    </a-modal>
    
    <!-- 图片成集 -->
    <ClipHightGroupList :visible="clipHightGroupVisible" :accountKey="accountKey" @submit="submitChange" @close="closeChange"/>

     <!-- 发布抽屉 -->
     <ImageTextIssue ref="ImageTextIssueRef" useType="图集成片" @submit="submitImageTextIssue"/>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  createVNode,
  onMounted,
  ref,
  h,
} from "vue";
import {
  DownOutlined,
  QrcodeOutlined,
  SearchOutlined,
  UpOutlined,
  ExclamationCircleOutlined,
  EyeOutlined,
  EllipsisOutlined,
  CloudSyncOutlined,
  InfoCircleOutlined
} from "@ant-design/icons-vue";
import QRCode from "./modules/QRCode.vue";
import dayjs from "dayjs";
import CreateFixed from "../components/CreateFixed/index.vue";
import AutomaticPublishing from "./modules/AutomaticPublishing.vue";
import { useRoute, useRouter } from "vue-router";
import request from "../../../common/utils/request";
import { Modal, message, notification } from "ant-design-vue";
import store from "@/store/index.js";
import { onBeforeRouteLeave } from "vue-router";

// 视频预览组件
import viewVideo from "@/views/shotstack/components/dialogComponent/viewVideo.vue";

// 重新发布弹窗
import reReleaseDialog from "./modules/reReleaseDialog.vue";
// 充值弹窗
import vipModal from "@/socialMedia/Vip/vipModal.vue";

// 图集成片
import ClipHightGroupList from "../MatrixMarketing/modules/ClipHightGroupList.vue"

// 发布抽屉
import ImageTextIssue from '../MaterialCenter/modules/ImageTextIssue.vue' 

// 图文发布记录 组件
import GraphicTextIssueRecord from "./modules/GraphicTextIssueRecord.vue";
const GraphicTextIssueRecordRef = ref()

export default defineComponent({
  name: "ReleaseList",
  components: {
    vipModal,
    DownOutlined,
    QrcodeOutlined,
    QRCode,
    SearchOutlined,
    UpOutlined,
    AutomaticPublishing,
    EyeOutlined,
    viewVideo,
    EllipsisOutlined,
    reReleaseDialog,
    CloudSyncOutlined,
    GraphicTextIssueRecord,
    ClipHightGroupList,
    ImageTextIssue,
    InfoCircleOutlined
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    // 重新发布弹窗实例
    const reReleaseDialogRef = ref(null);
    const state = reactive({
      isModalVisible: false,
      ModelUpState: false,

      modelLoading: false,
      vipVisible: false,
      bye: true,
      count: 0,
      qRCodeVisible: false,
      automaticPublishingVisible: false,
      activeKey: "douyin",
      dateKey: 0,
      dateList: [
        {
          title: "昨日",
          key: 0,
        },
        {
          title: "7天",
          key: 1,
        },
        {
          title: "30天",
          key: 2,
        },
      ],
      ranges: {
        过去7天: [dayjs().startOf("day").subtract(6, "day"), dayjs()],
        过去30天: [dayjs().startOf("day").subtract(30, "day"), dayjs()],
        过去90天: [dayjs().startOf("day").subtract(90, "day"), dayjs()],
      },
      futureTime: [],
      futureTimeRanges: {
        未来7天: [dayjs(), dayjs().add(7, "day")],
        未来30天: [dayjs(), dayjs().add(30, "day")],
        未来365天: [dayjs(), dayjs().add(365, "day")],
      },

      merchantName: "",
      dateTime: [],
      status: undefined,
      statusOptions: [
        {
          value: "1",
          label: "等待中",
        },
        {
          value: "2",
          label: "发布中",
        },
        {
          value: "3",
          label: "完成",
        },
        {
          value: "4",
          label: "失败",
        },
      ],
      POIName: "",

      expand: true,

      dataSource: [],

      columns: [
        {
          title: "发布计划",
          dataIndex: "merchant_name",
          key: "merchant_name",
          width: 300,
        },
        {
          title: "发布状态",
          dataIndex: "status",
          key: "status",
          align: "center",
          width: 90,
        },
        // {
        //   title: "账号数量",
        //   dataIndex: "account_count",
        //   key: "account_count",
        //   align: "center",
        //   width: 90,
        // },
        // {
        //   title: "播放总量",
        //   dataIndex: "play_count_all",
        //   key: "play_count_all",
        //   align: "center",
        //   width: 90,
        // },
        {
          title: "数据量",
          dataIndex: "AmountOfData",
          key: "AmountOfData",
          align: "center",
          width: 90,
        },

        {
          title: "发布方式",
          dataIndex: "release_type_msg",
          key: "release_type_msg",
          align: "center",
          width: 90,
        },
        {
          title: "创建时间",
          dataIndex: "created_at",
          key: "created_at",
          align: "center",
          width: 200,
        },
        {
          title: "挂载内容",
          dataIndex: "anchor_ary",
          key: "anchor_ary",
          width: 200,
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          width: 120,
          align: "center",
          fixed: "right",
        },
      ],
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      accountList: [],
      viewVideoRef: null,
      tabList: [],
      MobileimgUrl: "",

      // 重新发布id
      rePublishId: "",

      // "视频" || "图文"
      viewActiveKey:'视频',

      clipHightGroupVisible:false,

      accountKey: ''
    });

    // 表单数据收集
    const formState = reactive({
      publish_task_name: "", //任务名称, 发布计划备注
    });

    const hasDyConfig = ref(false)
    const routerQuery = computed(() => {
      return route.query;
    });

    onMounted(() => {
      store.dispatch('Getwork_ai_config').then((res)=>{
        hasDyConfig.value = res.hasDyConfig
      })
      state.activeKey = routerQuery.value.platform
        ? routerQuery.value.platform
        : state.activeKey;

        state.viewActiveKey = routerQuery.value?.viewActiveKey ?? '视频'
      getFilmreleaseList();


     
    });
    const qrCode = () => {
      state.qRCodeVisible = true;
    };

    // 自动发布
    const automaticPublishing = () => {
      state.automaticPublishingVisible = true;
    };

    const onConfirmChange = () => {
      state.automaticPublishingVisible = false;
      router.push({
        name: "AutoRelease",
      });
    };

    const dateClick = (key) => {
      state.dateKey = key;
    };

    const expandClick = () => {
      state.expand = !state.expand;
    };

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
    }));

    const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getFilmreleaseList();
    };

    const querySearchClick = () => {};

    const resettingClick = () => {};
    // tab切换
    const tabChangeHandle = () => {
      getFilmreleaseList();
    };
    const getFilmreleaseList = () => {
      state.loading = true;
      const params = {
        // 检索平台名称
        platform: state.activeKey,
        page: state.page,
        pageSize: state.pageSize,
      };
      request
        .get("/work_ai", "/user/filmrelease/list", {
          // .get("/work_ai", "/user/filmrelease/push/list", {
          ...params,
        })
        .then((res) => {
          state.dataSource = res.list.data;
          state.total = res.list.total;
          state.loading = false;
        })
        .catch(() => {
          state.loading = false;
        });
    };

    const handleGoDetail = (record) => {
      router.push({
        name: "ReleaseDetail",
        query: {
          filmId: record.id,
          platform: state.activeKey,
          send_type: record.send_type
        },
      });
    };

    const deleteClick = (record) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        state.vipVisible = true;
      } else {
        Modal.confirm({
          title: "确定要删除该条记录吗?",
          icon: createVNode(ExclamationCircleOutlined),
          content: "",
          okText: "确定",
          cancelText: "取消",
          onOk() {
            request
              .del("/work_ai", "/user/filmrelease/delete", {
                filmId: record.id,
              })
              .then((res) => {
                message.success("删除成功");
                getFilmreleaseList();
              });
          },
        });
      }
    };
    // 获取发布成片平台下拉列表
    const getAccountList = (imageTextRelease) => {
      request
        .get("/work_ai", "/org/platform/account/shotStackList", {
          filterShow: 1, //是否过滤掉没有对接的平台 1-是 0-不是
          imageTextRelease
        })
        .then((res) => {
          state.accountList = res.result;
          console.log(res.result);
          state.tabList = res.result;
        });
    };
    getAccountList();

    const clipRole = computed(() => store.state.user?.clipRole || []);

    const handleModelAPI = () => {
      state.isModalVisible = false;
      router.push({
        name: "AutoRelease",
        query: {
          platform: "douyin",
          type: "api",
        },
      });
    };

    const handleModelQrCode = () => {
      state.isModalVisible = false;
      router.push({
        name: "AutoRelease",
        query: {
          platform: "douyin",
          type: "qr_code",
        },
      });
    };

    // 跳转页面  / 判断
    const handleMenuClick = (e) => {
        router.push({
            name: "WechatAutoRelease",
            query: {
              platform: e,
            },
          });
    //   if (e?.developing == 1) {
    //     return message.warning("功能开发中");
    //   }

    //   if (store.getters.isVersionExpired) {
    //     notification.warn({ message: "您的套餐已到期", duration: 2 });
    //     state.vipVisible = true;
    //   } else {
    //     if (clipRole.value.length !== 0) {
    //       if(state.viewActiveKey == '图文'){
    //           state.accountKey = e.key
    //           state.clipHightGroupVisible = true
    //           return
    //       }
    //       if (e.key == "douyin" && hasDyConfig.value) {
    //         state.isModalVisible = true;
    //         return;
    //       }

    //       router.push({
    //         name: "AutoRelease",
    //         query: {
    //           platform: e.key,
    //         },
    //       });
    //     } else {
    //       message.warn("暂无套餐");
    //     }
    //   }
    };

    onBeforeRouteLeave((to, from, next) => {
      state.bye = false;
      next(true);
    });

    // 视频预览
    const toViewVideo = (url) => {
      state.viewVideoRef.open(url);
    };

    // 重新发布
    const reReleaseHandle = (record) => {
      reReleaseDialogRef.value.controls.open(record.id);
      state.rePublishId = record.id;
    };

    const isElectron = computed(() => {
      return import.meta.env.ELECTRON;
    });

    //发布二维码
    const getQrImage = async (data) => {
      state.modelLoading = true;
      let BASE_URL = isElectron.value
        ? import.meta.env.VITE_SITE_URL
        : window.location.origin;

      let url =
        BASE_URL +
        `/material/pages/qrcode/dy?type=random&film_release_id=${data.id}`;

      let qrcodeParams = {
        qrCode: url,
      };

      const res1 = await request.get("/public", "/qrcode", qrcodeParams);
      state.MobileimgUrl = res1.url;

      state.modelLoading = false;
      state.ModelUpState = true;
    };

    const handleClose = () => {
      state.ModelUpState = false;
    };

    // 重新发布结束
    const rePublishOver = () => {
      reReleaseDialogRef.value.controls.close();
      getFilmreleaseList();
    };
    
    const changeActiveKey=(e)=>{
      if(e=='图文'){
        getAccountList(1);
      }else{
        getAccountList(0);
        state.accountList = state.tabList
      }
    }


    const closeChange=()=>{
      state.clipHightGroupVisible = false
    }

    const ImageTextIssueRef = ref()
    const submitChange=({checkList,accountKey})=>{
      state.clipHightGroupVisible = false
      ImageTextIssueRef.value?.open({business_id:checkList,accountKey})
    }

    const submitImageTextIssue=()=>{
      state.viewActiveKey = '图文'
      GraphicTextIssueRecordRef.value.onSearch()
      ImageTextIssueRef.value?.close()
    }

    const ELECTRON =  import.meta.env.ELECTRON
    return {
      ...toRefs(state),
      ELECTRON,
      qrCode,
      reReleaseHandle,
      dateClick,
      expandClick,
      handleTableChange,
      toViewVideo,
      pagination,
      GraphicTextIssueRecordRef,
      querySearchClick,
      resettingClick,
      automaticPublishing,
      reReleaseDialogRef,
      onConfirmChange,
      deleteClick,
      handleGoDetail,
      tabChangeHandle,
      getAccountList,
      handleMenuClick,
      formState,
      h,
      routerQuery,
      handleClose,
      getQrImage,
      handleModelAPI,
      handleModelQrCode,
      changeActiveKey,
      closeChange,
      submitChange,
      ImageTextIssueRef,
      submitImageTextIssue
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ss-progress-text) {
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
}

// 列表, 发布计划项
.merchant_name {
  display: flex;
  cursor: pointer;
  align-items: center;

  // 左侧区域
  .merchant_name_lf {
    display: flex;
    align-items: center;
    margin-right: 10px;

    .cover_url {
      position: relative;

      img {
        width: 90px;
        height: 90px;
        background: black;
        object-fit: contain;
      }

      video {
        width: 90px;
        height: 90px;
        background: black;
      }

      .mask {
        position: absolute;
        left: 50%;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        background-color: #00000080;
        visibility: hidden;

        .to_view {
          color: #fff;
          opacity: 1 !important;
          font-size: 16px;

          &:hover {
            color: var(--ss-primary-color);
          }
        }
      }

      &:hover .mask {
        visibility: visible;
      }
    }
  }

  // 更多气泡展示
  .video_list {
    display: grid;
    gap: 10px;
    /* 项目之间的间隙 */
    max-width: 420px;
    max-height: 400px;
    padding-right: 10px;
    overflow-y: auto;
    grid-template-columns: repeat(4, 90px);

    &::-webkit-scrollbar {
      width: 8px;
      /* 滚动条的宽度 */
      height: 10px;
      /* 滚动条的高度，垂直滚动条可能用得上 */
      // display: none;
    }

    &::-webkit-scrollbar-thumb {
      background: #eeeeeeee;
      /* 滑块的背景颜色 */
      border-radius: 10px;
      /* 滑块的圆角 */
    }

    /* 每行显示4个，每个宽度为90px */
    .video_item {
      position: relative;

      img {
        width: 90px;
        height: 90px;
        object-fit: contain;
        background: black;
      }

      video {
        width: 90px;
        height: 90px;
        background: black;
      }

      .mask {
        position: absolute;
        left: 50%;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        background-color: #00000080;
        visibility: hidden;

        .to_view {
          color: #fff;
          opacity: 1 !important;
          font-size: 16px;

          &:hover {
            color: var(--ss-primary-color);
          }
        }
      }

      &:hover .mask {
        visibility: visible;
      }
    }
  }
}

.anchor_ary_box {
  p {
    font-size: 13px;
    margin: 0;
  }

  .anchor_ary_item_box {
    display: flex;
    flex-direction: column;
    // gap: 10px;

    .anchor_ary_item {
      background-color: #fff;
      display: flex;
      align-content: center;
      justify-content: center;
      border: 1px solid #cecece;
      border-radius: 5px;
      color: #535353;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      text-align: center;
      width: auto;
      margin: 5px 0;
      padding: 0 5px;
    }
  }
}

.box {
  padding: 14px 14px 0;
  .publish-btn {
    // width: 180px;
    height: 36px;
    // background: linear-gradient(125deg, #2878FF 18%, #ff9165 80%);
    border-radius: 8px;
    box-shadow: 0 6px 15px #2878ff4d;
    border: none;
  }
  .button {
    width: 156px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2878ff;
    border: 1px solid #2878ff;
    cursor: pointer;
    border-radius: 8px;

    &:hover {
      color: #2878ff;
      border: 1px solid #2878ff;
    }
  }



  .title {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .date-list {
    width: 240px;
    height: 35px;
    background-color: #ff916514;
    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: 0 10px;
    border-radius: 5px;

    .date-btn {
      background: #fff;
      padding: 2px 0;
      border-radius: 5px;
      color: #2878ff;
      box-shadow: 4px 4px 10px #2878ff33;
    }
  }

  .video-data-list {
    width: 100%;
    margin: 15px 0;

    .item-list {
      width: 220px;
      height: 148px;
      background: rgba(255, 255, 255, 0.6);
      margin-right: 20px;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, 0.05);
      padding: 18px 27px 15px 21px;
      min-width: 200px;
      cursor: pointer;

      .sub-title {
        font-size: 16px;
        color: #555;
      }

      .num {
        font-size: 32px;
        font-weight: 500;
        margin-top: 5px;
      }

      .icon-image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f6dcf1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

// 发布成片下拉样式
.account_item {
  width: 100px;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 3px, 10px;
  img {
    margin-right: 5px;
    width: 20px;
    height: 20px;
  }
}

.mobile-img {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 280px;
  }
}

.mobile-title {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
